<template>
    <div style="margin-top:10px;">
        <div class="container-box" @click="handleClick" style="margin:0 auto;">
            <img src="static/img/test.png">
            <div class="range" :style="item" v-for="(item,index) in list" :key="index" @click.stop="handleClickItem(item)">
                <div class="label">
                    <div class="value">{{item.status}}</div>
                    <div class="drop" :class="item.className"></div>
                </div>
            </div>
        </div>


        <el-dialog title="机器信息" :visible.sync="centerDialogVisible" width="30%" center>
            <span slot="footer" class="dialog-footer">
            <p>{{item}}</p>
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                centerDialogVisible: false,
                list:this.$route.params.list,
                item:{}
                // list: [
                //     {
                //         id: 1,
                //         top: '48%',
                //         left: '13%',
                //         className: 'yellow',
                //         status: '正常'
                //     },
                //     {
                //         id: 2,
                //         top: '15%',
                //         left: '17.5%',
                //         className: 'green',
                //         status: '警告'
                //     },
                //     {
                //         id: 3,
                //         top: '61%',
                //         left: '13%',
                //         className: 'red',
                //         status: '危险'
                //     },
                //     {
                //         id: 3,
                //         top: '25.05%',
                //         left: '54.56%',
                //         className: 'red',
                //         status: '我的'
                //     }
                // ]
            }
        },
        mounted() {
            console.log(this.list)
        },
        methods: {
            handleClickItem(item) {
                this.item = item
                // console.log(item)
                this.centerDialogVisible = true
            },
            handleClick(e){
                console.log(e.offsetX,e.offsetY)
            }
        },
    }

</script>


<style scoped>
    .container-box {
        width: 1600px;
        height: 850px;
        overflow: hidden;
        position: relative;
        background-size: cover;
    }

    .container-box img {
        height: 100%;
        width: 100%;
        z-index: -100;
    }
    .red {
        background: red;
    }
    .green {
        background: #50F250;
    }
    .yellow {
        background: #FFFF00;
    }
    .animation {
        -webkit-animation: twinkling 3s infinite ease-in-out;
        animation: twinkling 3s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .range {
        cursor: pointer;
        z-index: 100;
        left: 298px;
        top: 225px;
        box-sizing: border-box;
        position: absolute;
        padding: 0 50px;
        width: 100%;
    }
    .label {
        position: relative;
        top: 0;
        margin-left: -40px;
        margin-bottom: 20px;
        width: 80px;
        -webkit-animation: twinkling 1.3s infinite ease-in-out;
        animation: twinkling 1.3s infinite ease-in-out;
    }
    .value {
        position: absolute;
        top: 10px;
        left: -40px;
        right: 0;
        margin: 0 auto;
        text-align: center;
        font-size: 12px;
        font-weight:bold;
        color: #100F0F;
        z-index: 1;
    }
    .drop {
        box-sizing: content-box;
        width: 40px;
        height: 40px;
        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
        -webkit-transform: rotateZ(135deg);
        transform: rotateZ(135deg);
    }
    @-webkit-keyframes twinkling {
        0% {
            opacity: 0.5;
            filter: alpha(opacity=20);
            -webkit-transform: scale(1);
        }
        50% {
            opacity: 0.75;
            filter: alpha(opacity=50);
            -webkit-transform: scale(1.12);
        }
        100% {
            opacity: 1;
            filter: alpha(opacity=20);
            -webkit-transform: scale(1);
        }
    }

    @keyframes twinkling {
        0% {
            opacity: 0.5;
            filter: alpha(opacity=20);
            -webkit-transform: scale(1);
        }
        50% {
            opacity: 0.75;
            filter: alpha(opacity=50);
            -webkit-transform: scale(1.12);
        }
        100% {
            opacity: 1;
            filter: alpha(opacity=20);
            -webkit-transform: scale(1);
        }
    }
</style>